<template>
    <div class="cMenuBar flex-column">
        <div class="flex-center mt-10">
            <img class="logo" src="../../../../assets/logo.png" alt="">
        </div>
        <div class="ta-c mt-a" @click="showLogoutDialog">
            <div class="flex-center">
                <img class="logo" src="../../../../assets/logo.png" alt="">
            </div>
            <div class="fs-12 mt-10 mb-10 c-6 logout">退出登录</div>
        </div>
        <t-dialog header="退出" body="确定要退出账号吗？" v-model:visible="logoutDialog" :on-confirm="logoutEnter" />
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { accountInfo, isLogin, logout } from '@/utils/Account'
import { toPage } from '@/router'

const name = ref('components demo')
const logoutDialog = ref(false)
const props = defineProps({
    id: {
        default: '2024-07-01',
        type: String
    }
})

// 定义你想要在页面初始化时执行的方法
function checkLogin() {
    console.log('check login', accountInfo)
    if (!isLogin()) {
        toPage('/login')
    }
}

async function logoutEnter() {
    // 退出登录
    await logout()
    checkLogin()
}

function showLogoutDialog() {
    // 退出登录
    logoutDialog.value = true
}

// 使用onMounted钩子来调用tttt方法
onMounted(() => {
    checkLogin()
})
</script>

<style lang="scss" scoped>
.cMenuBar {
    width: 62px;
    height: 100vh;
    border-right: 1px solid #e3e3e3;
    background-color: #F7F7F7;

    .logo {
        width: 38px;
        height: 38px;
    }

    .logout {
        padding-bottom: 20px;
    }

}
</style>
